<script setup>
import { reactive, toRefs } from "vue";
import MyDatails from "../../components/MyDatails.vue";
import {
  geThemeListAPi,
  geNewsclassifyAPi,
  geSquareListAPi,
} from "../../http/http";
import MyTopic from "../../components/MyTopic.vue";
const data = reactive({
  Newsclassify: [],
  ThemeList: [],
  SquareList: [],
});
// 广场数据
const FnGeThemeList = async () => {
  let res = await geThemeListAPi();
  data.ThemeList = res.data;
};
// 话题信息
const FngeSquareList = async () => {
  let obj = {
    page: 1,
    limit: 20,
  };
  let res = await geSquareListAPi(obj);
  console.log(res.data);
  data.SquareList = res.data;
};
FngeSquareList();
// 图书勘误数据
const FnGeNewsclassify = async () => {
  let res = await geNewsclassifyAPi();
  data.Newsclassify = res.data;
};
FnGeThemeList();
// tab切换数据
const onClickTab = (e) => {
  if (e.name == 1) {
    FnGeNewsclassify();
  }
};
const { Newsclassify, ThemeList, SquareList } = toRefs(data);
</script>

<template>
  <div class="miao">
    <!-- 头部 -->
    <div class="header">
      <MyDatails>
        <template #left>
          <h2 class="h2">喵Wu~</h2>
        </template>
        <template #right>
          <span
            ><img
              src=""
              alt=""
          /></span>
        </template>
        <template #right_a>
          <span
            ><img
              src=""
              alt=""
          /></span>
        </template>
      </MyDatails>
    </div>
    <!-- tab -->
    <div class="maowu_text">
      <van-tabs v-model:active="active" @click-tab="onClickTab">
        <van-tab title="广场">
          <!-- 话题榜 -->
          <div class="maowu_text_header">
            <ul>
              <li>
                <p class="maowu_one"></p>
                <!-- <van-icon name="ellipsis" /> -->
                <div class="more">
                  <div class="span">
                    <span></span><span class="tre"></span><span></span>
                  </div>
                </div>
                <span>查看更多考研话题</span>
              </li>
              <li v-for="(item, index) in ThemeList" :key="index">
                <div class="img">
                  <img :src="item.background" alt="" />
                </div>
                <dl>#{{ item.title }}#</dl>
                <p>{{ item.dyna_count }}讨论</p>
              </li>
            </ul>
          </div>
          <!-- 话题内容 -->
          <div class="mao_list">
            <MyTopic :SquareList="SquareList"> </MyTopic>
          </div>
        </van-tab>
        <van-tab title="图书勘误">内容 2</van-tab>
        <van-tab title="关注">内容 3</van-tab>
      </van-tabs>
      <div class="maowu_cont"></div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
::v-deep .van-tab__panel {
  padding: 0 !important;
}
.miao {
  width: 750px;
  box-sizing: content-box;
  .header {
    padding: 15px;
    background: url(https://wap.lexuemiao.com/img/header_bar.72fa2a02.png)
      no-repeat;
    background-size: 100% 100%;
    padding-top: 30px;
    .h2 {
      font-size: 50px;
      font-weight: 700;
    }
    img {
      width: 40px;
      height: 50px;
    }
  }
  .maowu_text {
    width: 750px;
    background: white;
    .maowu_text_header {
      overflow-x: auto;
      padding: 20px;
      ul {
        height: 300px;
        display: flex;
        li {
          width: 200px;
          text-align: center;
          margin-left: 10px;
          .maowu_one {
            width: 200px;
            height: 200px;
            background: url(https://wap.lexuemiao.com/img/indexMore.eada8bd5.png)
              no-repeat;
            background-size: 100% 100%;
          }
          .more {
            display: flex;
            text-align: center;
            .span {
              margin: auto;
              height: 20px;
              span {
                width: 10px;
                height: 10px;
                background: #424963;
                display: inline-block;
                margin-bottom: 20px;
                border-radius: 50px;
              }
              .tre {
                margin: 20px;
              }
            }
          }
          p {
            font-size: 20px;
          }
          .img {
            width: 200px;
            height: 200px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 20px;
            }
          }
          dl {
            font-size: 20px;
            color: #f6652f;
          }
          span {
            font-size: 20px;
          }
        }
      }
    }
    .mao_list {
      margin-top: 30px;
    //   padding: 0 20px;
      background: #efefef;
    }
  }
}
::v-deep .van-tab__panel {
  margin-top: 30px;
  padding: 0 20px;
}
</style>